<template>
  <div>
    <!-- 标签页 -->
    <van-tabs v-model="active" sticky title-active-color="#ee0a24">
      <van-tab title="菜系">
        <!-- <div> -->
        <van-sticky :offset-top="44">
          <!-- 搜索框 -->
          <van-search
            @focus="$router.push('/search')"
            shape="round"
            v-model="value"
            placeholder="搜索食谱"
            fixed
          >
            <template #right-icon>
              <img width="22px" style="display: block" src="../assets/img/yuyin.svg" />
            </template>
          </van-search>
        </van-sticky>
        <van-grid :column-num="2" square :gutter="8" :center="true" :border="false" clickable>
          <van-grid-item v-for="value in 8" :key="value" to="/cooklist">
            <template #default>
              <van-image lazy-load radius="5px" fit="cover" src="/img/chuan.jpg" />
              <div class="text">川</div>
            </template>
          </van-grid-item>
        </van-grid>
        <!-- </div> -->
      </van-tab>
      <van-tab title="食材">
        <van-tree-select
          style="text-align: center; overflow: auto"
          height="100vh"
          :items="items"
          :main-active-index.sync="activeselect"
        >
          <template #content>
            <div>
              <van-grid
                v-if="activeselect == 0"
                :column-num="3"
                square
                :center="true"
                :border="false"
                clickable
              >
                <van-grid-item v-for="value in 18" :key="value">
                  <van-image radius="5px" src="/img/chuan.jpg"> </van-image>
                  <div>维生素</div>
                </van-grid-item>
              </van-grid>
              <!-- <van-image v-if="activeselect === 0" src="https://img01.yzcdn.cn/vant/apple-1.jpg" /> -->
              <van-image v-if="activeselect == 1" src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              <van-image v-if="activeselect == 2" src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
              <van-image v-if="activeselect == 3" src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
              <van-image v-if="activeselect == 4" src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
            </div>
          </template>
        </van-tree-select>
      </van-tab>
      <van-tab title="节日">
        <!-- 搜索框 -->
        <!-- <van-search v-model="value" placeholder="搜索食谱" fixed>
          <template #right-icon>
            <img width="22px" style="display: block" src="../assets/img/yuyin.svg" />
          </template>
        </van-search> -->
        <van-notice-bar
          color="#ee0a24"
          background="#fafafa"
          left-icon="volume-o"
          text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
        />
        <van-grid :column-num="4" :center="true" :border="false" clickable>
          <van-grid-item v-for="value in 8" :key="value">
            <template #default>
              <van-image radius="5px" fit="cover" src="/img/chuan.jpg" />
              <div style="margin-top: 10px">腊八</div>
            </template>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="专题">
        <!-- <div style="margin: 10px">
          <van-tag style="margin: 5px" round plain color="#333" size="large">微辣</van-tag>
          <van-tag style="margin: 5px" round plain color="#333" size="large">中辣</van-tag>
          <van-tag style="margin: 5px" round plain color="#333" size="large">超辣</van-tag>
          <van-tag style="margin: 5px" round plain color="#333" size="large">麻辣</van-tag>
          <van-tag style="margin: 5px" round plain color="#333" size="large">酸辣</van-tag>
          <van-tag style="margin: 5px" round plain color="#333" size="large">酸甜</van-tag>
        </div> -->
        <!-- <van-grid :column-num="2" :gutter="10">
          <van-grid-item v-for="value in 8" :key="value" icon="flower-o" text="微辣" />
        </van-grid> -->
        <!-- 搜索框 -->
        <!-- <van-sticky :offset-top="44">
          <van-search shape="round" v-model="value" placeholder="搜索食谱" fixed>
            <template #right-icon>
              <img width="22px" style="display: block" src="../assets/img/yuyin.svg" />
            </template>
          </van-search>
        </van-sticky> -->
        <!-- <van-grid :column-num="2" :gutter="10" clickable>
          <van-grid-item
            v-for="value in 10"
            :key="value"
            style="margin-top: 40px; height: 8vh; position: relative"
          >
            <template #default>
              <van-image
                width="5em"
                style="
                  position: absolute;
                  top: -24px;
                  right: 2vw;
                  z-index: 2;
                  background-color: #fff;
                  border: 3px solid #fff;
                "
                round
                src="/img/meishi1.svg"
              />
              <div>微辣</div>
            </template>
          </van-grid-item>
        </van-grid> -->
        <van-tabs v-model="secactive" swipeable title-active-color="#ee0a24">
          <van-tab title="全部">
            <div class="detail">
              <div v-for="value in 2" :key="value">
                <van-image radius="5px" width="40vw" height="40vw" src="/img/chuan.jpg" />
                <div>四川小吃的做法</div>
              </div>
            </div>
          </van-tab>
          <van-tab title="主题美食">
            <div class="detail">
              <div v-for="value in 2" :key="value">
                <van-image radius="5px" width="40vw" height="40vw" src="/img/chuan.jpg" />
                <div>四川小吃的做法</div>
              </div>
            </div>
          </van-tab>
          <van-tab title="厨电专题">
            <div class="detail">
              <div v-for="value in 2" :key="value">
                <van-image radius="5px" width="40vw" height="40vw" src="/img/chuan.jpg" />
                <div>冬日最爱-暖锅料理</div>
              </div>
            </div>
          </van-tab>
          <van-tab title="经典美食">
            <div class="detail">
              <div v-for="value in 2" :key="value">
                <van-image radius="5px" width="40vw" height="40vw" src="/img/chuan.jpg" />
                <div>龙井虾仁</div>
              </div>
            </div>
          </van-tab>
          <van-tab title="健康美食">
            <div class="detail">
              <div v-for="value in 2" :key="value">
                <van-image radius="5px" width="40vw" height="40vw" src="/img/chuan.jpg" />
                <div>小寒节气,养生有方</div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      active: 0,
      secactive: 0, //二级标签栏
      activeselect: 0,
      items: [
        { text: '推荐' },
        { text: '猪肉' },
        { text: '牛肉' },
        { text: '鸡肉' },
        { text: '羊肉' },
        { text: '蛋类' },
        { text: '其他肉类' },
        { text: '其他禽类' },
        { text: '淡水鱼' },
        { text: '海水鱼' },
        { text: '虾类' },
        { text: '蟹类' },
        { text: '蟹类' },
        { text: '蟹类' },
        { text: '蟹类' },
        { text: '蟹类' },
        { text: '蟹类' },
      ],
      countLike: 0, // 点赞按钮点击次数
    }
  },
  methods: {
    giveLike() {
      this.countLike++
      if (this.countLike % 2 != 0) {
        console.log(this.countLike)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.active {
  color: #ee0a24;
}
.van-grid-item__content {
  padding: 0 !important;
}
.text {
  position: absolute;
  font-size: 48px;
  z-index: 1;
  color: #ebebeb;
}
.detail {
  margin: 10px;
  display: flex;
  justify-content: space-around;
  div {
    margin-top: 5px;
    text-align: center;
  }
}
</style>
